<script lang="ts" setup>
import { ref } from "vue"
import { appName } from "@/config/app"
import { IHome, IAdd, IOmit, IGood, IEdit, IGrass, IComment } from "@cop/Icons"
import { getToken } from "@/util/auth"
import login from "./login.vue"
import edit from "./edit.vue"
import myH1 from "@/lowCodeCop/myH1.vue"
import CopBox from "@cop/copBox/index.vue"
import userInfo from "./userInfo.vue"
import { NPopconfirm, NBackTop } from "naive-ui"
import { useUserStore } from "@/store"
import { blogComponentsKeys, type BlogComponentsKeys } from "@/lowCodeCop/index"

const userStore = useUserStore()
const loginIsShow = ref<boolean>(false)
const userInfoIsShow = ref<boolean>(false)

const openUserInfo = () => {
  userInfoIsShow.value = true
}
const handlePositiveClick = () => {
  userStore.logout()
}
</script>

<template>
  <div class="sideMenu">
    <div class="title">{{ appName }}</div>
    <div class="menu">
      <CopBox
        v-for="(item, index) in blogComponentsKeys"
        :copName="item"
        :index="index + 1"
        :key="item"
      />
      <n-back-top right="77vw" style="z-index: 99999" />
    </div>
    <!-- <login v-model:show="loginIsShow" /> -->
    <!-- <edit /> -->
    <!-- <userInfo v-model:show="userInfoIsShow" /> -->
  </div>
</template>

<style lang="scss" scoped>
.sideMenu {
  background: var(--bodyBg);
  box-sizing: border-box;
  height: 100%;
  transition: all 0.3s var(--n-bezier);
  .title {
    box-sizing: border-box;
    font-size: 24px;
    color: var(--themeColor);
    padding: 15px;
    margin-left: 1vw;
    height: 70px;
  }
  .menu {
    width: 100%;
    margin: 10px auto;
    height: calc(100% - 70px);
    box-sizing: border-box;
    padding: 15px;
    overflow: scroll;
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track-piece {
      background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background-color: var(--search-result-scroll-bg) !important;
      background-image: none;
    }

    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
  }
}
</style>
